﻿@using CleanArchitecture.Core.Helper
@using CleanArchitecture.Infrastructure.Models.AdminUsers
@using CleanArchitecture.Infrastructure.Entities
@model AdminRoleModel
@{
    Layout = "_BackendLayout";
    ViewData["Title"] = ViewBag.PageTitle as string;
}
@section cssstyles{
    <style type="text/css">
        .layui-form-switch {
            margin-top: 6px;
            height: 25px;
        }

        .layui-form-label {
            width: 130px !important;
        }

        .layui-input-block {
            margin-left: 130px !important;
        }

        .layui-slider-input {
            top: 0 !important;
        }

        .orderSlider {
            padding-top: 15px;
        }

        .organizetree {
            position: absolute;
            background-color: #fff;
            padding: 5px;
            z-index: 1000;
            box-shadow: 0 0 24px rgba(0,0,0,.18);
            opacity: 0;
            width: 220px;
            height: 0;
            display: none;
        }

        .organizetree.active {
            display: block;
            opacity: 1;
            height: auto;
            max-height: 330px;
            overflow: auto;
            transition: all .5s;
        }
    </style>
}
<div class="layui-fluid">
    <div class="layui-form layui-card">
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<AdminRoleModel>(m => m.OranizeName))</label>
                <div class="layui-input-inline">
                    <input type="text" name="@Model.nameof(m => m.OranizeName)" value="@Model.OranizeName" lay-verify="required" placeholder="请选择所属机构组织" autocomplete="off" class="layui-input" readonly />
                    <input type="text" class="layui-hide" name="@Model.nameof(m => m.FKOrganizeId)" value="@Model.FKOrganizeId" />
                    <div id="organizetree" class="layui-row organizetree"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<AdminRoleModel>(m => m.RoleName))</label>
                <div class="layui-input-inline">
                    <input type="text" name="@Model.nameof(m => m.RoleName)" value="@Model.RoleName" lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">20字以内字母/数字/中文组合</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<AdminRoleModel>(m => m.IsAdmin))</label>
                <div class="layui-input-inline">
                    <input type="checkbox" lay-filter="AdminSwitch" name="@Model.nameof(m => m.IsAdmin)" value="@Model.IsAdmin" lay-skin="switch" lay-text="是|否" @if (Model.IsAdmin == CleanArchitecture.Infrastructure.Entities.EntityEnumConfig.YesorNo.YES) { <text> checked</text> }>
                </div>
                <div class="layui-form-mid layui-word-aux">如为超级管理员不允许删除</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<AdminRoleModel>(m => m.DisplayOrder))</label>
                <div class="layui-input-inline">
                    <div id="orderSlider" class="orderSlider"></div>
                    <input type="text" class="layui-hide" name="@Model.nameof(m => m.DisplayOrder)" value="@(Model.Id == 0 ? 1 : Model.DisplayOrder)" />
                </div>
            </div>
            <input type="text" name="@Model.nameof(m => m.Id)" value="@Model.Id" class="layui-hide" />
            <input type="text" name="@Model.nameof(m => m.IsActive)" value="@Model.IsActive" class="layui-hide" />
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-filter="roleInfoSubmit" lay-submit="">
                        保存提交
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        layui.use(['layer','form', 'element', 'notice', 'iziToast', 'slider', 'tree'], function () {
            var form = layui.form,
                element = layui.element,
                layer = layui.layer,
                slider = layui.slider,
                tree = layui.tree,
                notice = Util.notice !== null && Util.notice() !== null
                       ? Util.notice() : layui.notice,
                iziToast = layui.iziToast;
            var initPageComponents = function () {
                //排序组件
                let $order = $("input[name=@Model.nameof(m => m.DisplayOrder)]");
                slider.render({
                    elem: '#orderSlider'
                    , min: 1
                    , max: 50
                    , input: true //输入框
                    , theme: '#1E9FFF' //主题色
                    , value: $order.val()
                    , change: function (value) {
                        $order.val(value);
                    }
                });
                //机构组织树
                let $treeContainer = $("div.organizetree");
                httpapi.fetchGet('/api/system/getsystemdatadictree?grouptype=1').then(res => {
                    if (!httpapi.checkResponse(res))
                        //输入信息校验错误
                        notice.error(res.message);
                    else {//Success
                        tree.render({
                            elem: $treeContainer,
                            id: "organizetree",
                            onlyIconControl: true,
                            data: res.data,
                            click: function (obj) {
                                if (obj.data.id) {
                                    $("input[name='OranizeName']").val(obj.data.title);
                                    $("input[name='FKOrganizeId']").val(obj.data.id);
                                }
                            }
                        });
                    }
                }).catch(error => notice.error("对不起，出现未知错误，请您联系系统管理员！"));
                $("input[name='OranizeName']").click(function () {
                    $("div#organizetree").addClass("active");
                });
                $("div#organizetree").mouseleave(function () {
                    $(this).removeClass("active");
                });
            };
            initPageComponents();
            form.on('switch(AdminSwitch)', function (data) {
                var value = data.elem.checked ? @((int)EntityEnumConfig.YesorNo.YES) : @((int)EntityEnumConfig.YesorNo.No);
                $(data.elem).val(value); //得到checkbox原始DOM对象
            });
            //提交保存
            form.on('submit(roleInfoSubmit)', function (data) {
                var postData = data.field;
                var index = layer.load(2, {time: 10*1000});
                httpapi.fetchPost('/api/system/adminrolemanage/edit', postData).then(res => {
                    layer.close(index);
                    if (!httpapi.checkResponse(res))
                        //输入信息校验错误
                        notice.error(res.message);
                    else {//Success
                        iziToast.loading(res.message);
                        $.wait(2000).then(function () {
                            Util.MainWindowRedirect("/backend");
                        });
                    }
                }).catch(error => notice.error("对不起，出现未知错误，请您联系系统管理员！"));
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
    </script>
}